<template>
  <hcDialog
    dialogWidth="30%"
    dialogTitle="新增数据"
    :isVisable="addDataShow"
    @closeDialog="closeFun"
    @openDialog="openFun"
  >
    <el-form :rules="rules" :model="form" ref="formRef" label-width="100">
      <el-form-item label="字段名称" prop="paramName">
        <el-input v-model="form.paramName"></el-input>
      </el-form-item>
      <el-form-item label="字段属性" prop="paramType">
        <el-input v-model="form.paramType"></el-input>
      </el-form-item>
      <el-form-item label="字段内容" prop="paramValue">
        <el-input v-model="form.paramValue"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="valueType">
        <el-input v-model="form.valueType"></el-input>
      </el-form-item>
      <el-form-item label="字体格式" prop="fontType">
        <el-input v-model="form.fontType"></el-input>
      </el-form-item>
      <el-form-item label="字体大小" prop="fontSize">
        <el-input v-model="form.fontSize"></el-input>
      </el-form-item>
      <el-form-item label="字符长度" prop="charLenth">
        <el-input v-model="form.charLenth"></el-input>
      </el-form-item>
      <el-form-item label="起始坐标" prop="position">
        <el-input v-model="form.position"></el-input>
      </el-form-item>

      <el-form-item label="">
        <el-button @click="save" type="primary">保存</el-button>
        <el-button @click="cancel" type="danger">取消</el-button>
      </el-form-item>
    </el-form>
  </hcDialog>
</template>

<script setup name="UserDialog">
import { reactive, ref } from "vue";

const emit = defineEmits(["closeDialog"]);

const props = defineProps({
  addDataShow: {
    type: Boolean,
    default: false,
  },
});
const formRef = ref();

let form = reactive({
  paramName: "",
  paramType: "",
  paramValue: "",
  valueType: "",
  fontType: "",
  fontSize: "",
  charLenth: "",
  position: "",
});

const rules = {
  paramName: [{ required: true, message: "请输入字段名称", trigger: "blur" }],
};

// 关闭弹框
const closeFun = () => {
  formRef.value.resetFields();
  cancel();
};

function openFun() {}

function save() {
  formRef.value.validate((valid) => {
    if (valid) {
      let val = JSON.parse(JSON.stringify(form));
      emit("closeDialog", val);
    }
  });
}

function cancel() {
  emit("closeDialog", false);
}
</script>

<style lang="scss" scoped></style>
